<template>
    <div class="recommended-reading-main_home-index-router">
        <div class="r_title">
            <span class="txt1">推荐</span>
            <span class="txt2">阅读</span>
        </div>
        <div class="list">
            <div v-for="(item, index) in readingList" :key="index" class="item">
                <nuxt-link
                    class="item_title"
                    target="_blank"
                    :to="getRoterLink(item)"
                    >{{ item[titleKey] }}</nuxt-link
                >
                <div class="item_text" v-html="item[textKey]"></div>
                <div class="time">{{ item.createtime }}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "recommendedReading",
    props: {
        readingList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        titleKey: {
            type: String,
            default: "title",
        },
        textKey: {
            type: String,
            default: "introduce",
        },
        toType: {
            type: String,
            default: "Quiz",
        },
    },
    data() {
        return {
            getRoterLink: function (item) {
                switch (this.toType) {
                    case "Quiz": // 问题库
                        return `/quizdata/${item.id}.html`;
                    case "ssfgk": // 税收法规库
                        return `/ssfgk/${item.id}.html`;
                    case "kjfgk": // 会计法规库
                        return `/kjfgk/${item.id}.html`;
                    default:
                        return "/";
                }
            },
        };
    },
    methods: {},
    created() {},
    mounted() {
        // console.log(this.textKey)
    },
    watch: {},
};
</script>
<style lang="scss">
.recommended-reading-main_home-index-router {
    width: 100%;
    background: #fff;
    padding: 30px 35px;

    .r_title {
        font-size: 18px;
        font-weight: 700;
        color: #333333;
        line-height: 12px;

        .txt1 {
            color: #fa5151;
        }
    }

    .list {
        margin-top: 27px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f3f3f3;

        .item {
            max-width: 50%;
            box-sizing: border-box;
            display: block;
            flex-basis: 50%;
            padding: 27px 0 17px;
            border-right: 1px solid #f3f3f3;
            border-bottom: 1px solid #f3f3f3;
            padding-left: 50px;

            .item_title {
                margin-bottom: 12px;
                font-size: 16px;
                font-weight: 600;
                color: #333333;
                line-height: 22px;
                //多行文本溢出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                /*设置对齐模式*/
                -webkit-line-clamp: 1;
                /*设置多行的行数，示例为1行*/
                &:hover {
                    color: #1c87f3;
                    text-decoration: underline;
                }
            }

            &:nth-child(odd) {
                padding-left: 0;
                padding-right: 50px;
                box-sizing: border-box;
            }

            &:nth-child(2n) {
                border-right: none;
            }

            &:nth-last-child(-n + 2) {
                border-bottom: none;
            }
        }
    }

    .item_text {
        height: 40px;
        min-width: 296px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px !important;
        //多行文本溢出显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /*设置对齐模式*/
        -webkit-line-clamp: 2;
        /*设置多行的行数，示例为2行*/
        img {
            display: none;
        }
        p {
            line-height: 20px !important;
        }
        span {
            line-height: 20px !important;
        }
        a {
            line-height: 20px !important;
        }
    }
    .time {
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
    }
}
</style>